import "./index.scss";
import React from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Flex, Card, message } from "antd";
import { useNavigate } from "react-router-dom";

function Login() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const onFinish = (values) => {
    messageApi.success('登录成功');
    setTimeout(() => {
      navigate("/", {replace: true});
    }, 1000);
  }
  return (
    <div className="login">
      {contextHolder}
      <Card className="login-container">
        <h3 className="title">旅梦后台管理系统</h3>
        <Form
          name="login"
          initialValues={{
            remember: true,
            username: "admin",
            password: "123456"
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "请输入账号",
              },
              {
                min: 5,
                message: "账号不能小于5位", 
              }
            ]}
          >
            <Input prefix={<UserOutlined />} placeholder="账号" size="large" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
              size="large"
            />
          </Form.Item>
          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              <a href="">忘记密码？</a>
            </Flex>
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit" size="large">
              登录
            </Button>
            or <a href="">立即注册</a>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Login;
